import React from 'react'
import { Form, Input, Button, DatePicker } from 'antd'
import { disabledStartDate, disabledEndDate } from '../batchRecord/Search'

const FormItem = Form.Item

const UpStreamRecordSearch = (props) => {

  const itemLayout = { style: { width: 120 } };

  const { 
    messageId,
    accessNumber,
    phone,
    startTime,
    endTime,
    onChangeMessageId,
    onChangeAccessNumber,
    onChangePhone,
    onChangeStartTime,
    onChangeEndTime,
    onSearch,
   } = props

   
   
  return (
    <Form layout="inline" style={{padding: 24}}>
      <FormItem label="消息编号">
        <Input {...itemLayout} placeholder="消息编号" value={messageId} onChange={onChangeMessageId} />
      </FormItem>
      <FormItem label="接入号">
        <Input {...itemLayout} placeholder="接入号" value={accessNumber} onChange={onChangeAccessNumber} />
      </FormItem>
      <FormItem label="上行号码">
        <Input {...itemLayout} placeholder="上行号码" value={phone} onChange={onChangePhone} />
      </FormItem>
      <FormItem label="开始时间">
        <DatePicker {...itemLayout} onChange={onChangeStartTime} defaultValue={startTime} disabledDate={disabledStartDate.bind(null, endTime)} />
      </FormItem>
      <FormItem label="结束时间">
        <DatePicker {...itemLayout} onChange={onChangeEndTime} defaultValue={endTime} disabledDate={disabledEndDate.bind(null, startTime)} />
      </FormItem>
      <FormItem>
        <Button type="primary" onClick={onSearch} >查询</Button>
      </FormItem>
    </Form>
  )
}

export default Form.create()(UpStreamRecordSearch)